<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <script type="text/javascript" src="/layui/jquery-3.5.1.min.js"></script>
    <script src="/layui/layui.js" charset="utf-8"></script>
    <script>

    </script>
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>

<!--动态绑定-->
<script type="text/html" id="toolbarDemo" th:inline="javascript">
    <div class="layui-btn-container">
        <!--lay-event 相当于点击事件名-->


    </div>
</script>
<script type="text/html" id="barDemo" th:inline="javascript">
    <a class="layui-btn layui-btn-xs" lay-event="edit">查看详情</a>
</script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#test'//绑定表格
            //数据来源
            ,url:'/approve/getLog'//绑定数据来源
            ,toolbar: '#toolbarDemo'//绑定三个按钮
            ,title: '我的出差申请表'
            ,page: true
            ,cols: [
                [
                    {field:'numbering', title:'编号', width:150, fixed: 'left', unresize: true, sort: true, totalRowText: '合计'}
                    ,{field:'addTime', title:'申请日期', width:150, edit: 'text',templet:'<div>{{ layui.util.toDateString(d.addTime, "yyyy-MM-dd") }}</div>'}
                    ,{field:'planTravelDate', title:'出差时间', width:150, edit: 'text', templet:'<div>{{ layui.util.toDateString(d.planTravelDate, "yyyy-MM-dd") }}</div>'}
                    ,{field:'supplier.name', title:'客户', width:150, sort: true,  templet: '<div>{{d.supplier.name}}</div>'}
                    ,{field:'staff.name', title:'申请人', width:150, sort: true,  templet:'<div>{{d.staff.name}}</div>'}
                    ,{field:'travelNumber', title:'随行人数', width:150, edit: 'text'}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:110}
                ]
            ]
        });

        //工具栏事件 识别lay event
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选')
                    break;
                case 'goApplicationTemplate':
                    window.location = '/business-trip/application';
            };
        });
        //监听工具条 'tool(test)'要手动修改 tool是和  test是和table的lay-filter属性绑定
        table.on('tool(test)', function(obj){
            var data = obj.data;
            var id = data.id;
            if(obj.event === 'detail'){//判断lay-event属性
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(table);
                });
            } else if(obj.event === 'edit'){
                $.ajax({
                    url: "/approve/go",
                    type:"post",
                    data: {'id':id},
                    success:function (data) {
                        window.location.href="/approve/travelLog?id="+id;
                    }
                })
            }
        });
    });
</script>
</body>
</html>